<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> palyGame-block </title>
    <style>
        .container{
            width: 200px;
            height: 360px;
            background-color: #000;
            position: relative;
        }
        .actvity_model{
            width: 20px;
            height: 20px;
            background-color: rgb(77, 129, 77);
            border: .3px solid #eee;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
    
</head>
<body onload="init()">
    <div id="" class="container">
        <!-- <div class="actvity_model"></div> -->
    </div>   
</body>
</html>
<script>
    //4- 分割容器 18行10列 
    var RWO_COUNT= 18,
        COL_COUNT= 10;
        //5 创建模型数据的数据源  
        var MOOELS = [
        {
                0:{row:2,col:0},
                1:{row:2,col:1},
                2:{row:2,col:2},
                3:{row:1,col:2},
        }
        ]
        //6 变动模型具  当前使用 
        var currentModel = {

        }
    //3- 常量 step 控制块元素移动 
    var STEP = 20;
    //1- 页面初始化 onload后调用init()
    function init(){
        createModel()
        onKeyDown()
    }
    //7- 根据模型的数据源 来创建对应的块元素 
    function createModel(){
        //确定当前使用那一个模型  
        currentModel = MOOELS[0];
        //生成对应数量的块元素
        for (const key in currentModel) {
           var divEle = document.createElement("div");  //创建小块 追加至大盒子
           divEle.className = "actvity_model";
           document.getElementById("container").appendChild(divEle)
        }
    }
    //8- 根据数据源定位块元素的位置 
    function locationBlocks(){
        //拿到所有的块元素 
        var eles = document.getElementsByClassName("actvity_model")
        //找到每个 对应的数据  指定位置 
        for (let i = 0; i < eles.length; i++) {
            var actI = eles[i];  //找到块元素的对应数据 行 列 

        }
    }

    //2- 控制move 监听用户事件 
    function onKeyDown(){
        document.onkeydown = function(e){
            console.log(e.keyCode,"键盘码")   //上38 右39 下40 左37
            switch(e.keyCode){
                case 38:
                console.log("上");
                move(0,-1)
                break;
                case 39:
                console.log("右");
                move(1,0)
                break;
                case 40:
                console.log("下");
                move(0,1)
                break;
                case 37:
                console.log("左");
                move(-1,0)
                break;
            }
        }
    }
    //3- 移动x y轴的参数 
    function move(x,y){
        //控制块移动 修改得参数
        console.log('tag', x,y)
        // debugger
        var moveI = document.getElementsByClassName("actvity_model")[0];
        moveI.style.top = parseInt(moveI.style.top || 0) + y * STEP +"px";  //y
        moveI.style.left = parseInt(moveI.style.left || 0) + x * STEP +"px"; //x
    }
    /*
      *创建w200 * h200容器 
      *创建小块 20*20 
      *控制元素的移动 每次移动20px
      *将容器分割 18行 20列 行&列均高20px  

        做L形状的块 
    
    
    */ 

</script>